<template>
	<view :key='key' class="container-box">

		<Daily ref='Daily' v-if="keyIndex==='1'" :keyIndex='keyIndex' />
		<MakeAnAppointment ref='MakeAnAppointment' v-else :keyIndex='keyIndex' />
		<!-- <view class="content-box">
			<view class="list-box">
				<view class="item-box" v-for="item in 10" :key='item'>
					<view class="bottom-box">
						<view class="c-box">
							<view class="left-box">预约成功！</view>
						</view>
						<view class="c-box">
							<view class="left-box">您已经成功预约北京分院</view>
						</view>
					</view>
				</view>
			</view>
		</view> -->
	</view>
</template>
<script>
	import Daily from './Daily/index.vue'
	import MakeAnAppointment from './MakeAnAppointment/index.vue'

	export default {
		data() {
			return {
				list: [{
					name: '未读',
				}, {
					name: '已读',
				}],
				active: 0,
				keyIndex: '1',
			}
		},

		components: {
			MakeAnAppointment,
			Daily
		},
		methods: {
			tabsClick(index) {
				this.active = index
			}
		},
		onShow() {
			if (this.$refs.MakeAnAppointment) {
				this.$refs.MakeAnAppointment.updateMethod()
			} else {
				this.$refs.Daily.updateMethod()
			}
		},
		onLoad(data) {
			this.keyIndex = data.index;
		}
	}
</script>
<style lang="scss" scoped>
	.container-box {
		background-color: #eaecfa;
		min-height: 100vh;
	}

	.active-tabs {
		color: #216be6;
		// font-size: 32rpx;
		font-weight: 600;
	}

	.title-t {
		display: flex;
		justify-content: space-between;
		padding-bottom: 10rpx;
		border-bottom: 1px dashed #ccc;
		align-items: center;

		view:nth-child(1) {
			font-weight: 600;
		}

		view:nth-child(2) {}
	}

	.item-box {
		padding: 20rpx;
		padding-left: 40rpx;
		font-size: 24rpx;
		width: 100%;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		background-color: #fff;
		overflow: hidden;
		position: relative;
		box-sizing: border-box;
	}

	.item-box::before {
		content: '';
		position: absolute;
		display: block;
		width: 10px;
		height: 100%;
		background-color: #5269cc;
		top: 0;
		left: 0;
	}

	.list-box {
		padding: 20rpx;
		overflow: hidden;
	}

	.bottom-box {
		padding-top: 10rpx;
		overflow: hidden;
		color: #666;
	}

	.c-box {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10rpx;
	}

	.tabs-box {
		display: flex;
		justify-content: center;
		padding: 20rpx;
		background-color: #fff;
	}
</style>